<style lang="less" scoped>
.home,.map-container {
  height: 100%;
}
</style>

<template>
  <div class="home">
    <div ref="map" class="map-container">

    </div>
  </div>
</template>

<script>
import L from '@/libs/L'

export default {
  name: 'Home',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.map = L.map(this.$refs.map).setView([32.059352, 118.796623], 12)
    L.tileLayer('http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=827222731593c05f3befc079a43e106a', {
      maxZoom: 18,
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
    }).addTo(this.map)
    L.tileLayer('http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=827222731593c05f3befc079a43e106a', {
      maxZoom: 18,
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
    }).addTo(this.map)
    const img = L.distortableImageOverlay('./nla.jpg', {
      mode: 'scale',
      selected: true,
      actions: [L.FreeRotateAction, L.ScaleAction, L.OpacityAction]
    }).addTo(this.map)
    console.log(img)
    console.log(img.getAngle())
  },
  destroyed () {
    if (this.map) {
      this.map.remove()
      this.map = null
    }
  },
  components: {

  }
}
</script>
